﻿<!--@Knockout-->
<div style="height:500px; max-width:750px; margin: 0 auto">
    <div data-bind="dxColorBox: {
        value: colorValue,
        disabled: disabledValue
    }"></div><br />
    <div class="checkbox" data-bind="dxCheckBox: {
        text: 'disabled',
        value: disabledValue
    }"></div>
    <p class="text" data-bind="style: { color: colorValue }">Colored Text</p>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div style="height:500px; max-width:750px; margin: 0 auto" ng-controller="demoController">
    <div ng-model="colorValue" dx-color-box="{
        bindingOptions: {
            disabled: 'disabledValue',
        }
    }"></div><br />
    <div class="checkbox" ng-model="disabledValue" dx-check-box="{
        text: 'disabled'
    }"></div>
    <p class="text" ng-style="{ color: colorValue }">Colored Text</p>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div style="height:500px; max-width:750px; margin: 0 auto">
    <div id="myColorBox"></div><br />
    <div class="checkbox" id="disabledSelector"></div>
    <p class="text" id="coloredText">Colored Text</p>
</div>
<!--/@jQuery-->